<template>
    <div class="good-item-div">
        <div style="width: 100%;height: 10px;clear: both;"></div>
        <div class="good-item" @click="showDetail">
            <img :src="good.logoImg">
            <div class="good-item-right">
                <div class="good-name"><span v-if="good.isHot === 1"
                        style="background-color: red; font-size:10px;padding: 2px 4px;color: white;border-radius: 3px;"><van-icon
                            color="white" name="fire" /></span>
                    {{ good.goodName }}
                </div>
                <div class="good-tag">
                    <van-tag round style="margin-right: 5px;margin-top: 2px;" type="warning" plain v-for="item in goodTag"
                        v-bind:key="'good' + item.id">{{ item }}</van-tag>
                </div>
                <!-- <div class="good-supplier">{{ good.parentName }}</div> -->
                <div class="commission-rule">
                    {{ good.activeCommission ? '激活佣金' + good.activeCommission + '元' : '' }}
                </div>
            </div>
            <div style="width: 100%;height: 5px;clear: both;border-bottom: 1px solid #eee;"></div>
        </div>
        <div style="width: 100%;height: 8px;clear: both;"></div>
        <div class="good-item-button">
            <van-button round v-if="good.status === 100 && $hasPermi('system:goodinfo:query')" plain hairline type="success"
                size="mini" style="margin-right: 5px;float: right;padding:0px 10px;" color="#15C261"
                @click="showCommitOrderUrl">下单链接</van-button>
            <van-button round v-if="$hasPermi('system:goodinfo:yj')" plain hairline type="warning" size="mini" color="black"
                style="margin-right: 8px;float: right;padding:0px 10px;border:1px solid #CCCCCC;"
                @click="changeCommissionRule">佣金设置</van-button>
            <van-button round v-if="good.status === 100 && $hasPermi('system:goodinfo:sjandxj')" plain hairline
                type="danger" size="mini" style="margin-right: 5px;float: right;padding:0px 10px;border:1px solid #CCCCCC;"
                color="black" @click="changeStatus(1)">下架</van-button>
            <van-button round v-if="good.status === 1 && $hasPermi('system:goodinfo:sjandxj')" plain hairline type="danger"
                size="mini" style="margin-right: 5px;float: right;padding:0px 10px;border:1px solid #CCCCCC;" color="black"
                @click="changeStatus(100)">上架</van-button>
        </div>
        <div style="width: 100%;height: 10px;clear: both;"></div>

        <van-dialog v-model:show="commissionRuleDlalog" title="佣金设置" width="90%" showCancelButton :allowHtml="true"
            confirmButtonText="保存" @confirm="updateCommissionRule">
            <div style="width: 94%;margin-left: 3%;background-color: #eee;font-size: 14px;margin-top: 5px;">
                <div style="height: 20px;width: 100%;"></div>
                <div style="width: 94%;margin-left: 3%;font-size: 14px;">
                    <van-cell-group>
                        <van-field label-width="50" v-model="form.activeCommission" label="佣金" placeholder="请输入已激活佣金" />
                    </van-cell-group>
                </div>
                <div style="height: 20px;width: 100%;"></div>
            </div>
            <div style="height: 10px;width: 100%;"></div>
        </van-dialog>
    </div>
</template>

<script>
import { updateStatusShangJiaCustomStatus, updateCustomActiveCommission } from '@/api/admin/goodinfo'
import { showConfirmDialog, showToast } from 'vant';
export default {
    name: "GoodItem",
    props: {
        good: Object
    },
    created() {
        if (this.good.tagName) {
            this.goodTag = JSON.parse(this.good.tagName)
        }

        this.form.id = this.good.id;
        this.form.activeCommission = this.good.activeCommission;
    },
    data() {
        return {
            goodTag: [],
            commissionRule: "",
            commissionRuleDlalog: false,
            form: {},
        }
    },
    methods: {
        changeStatus(s) {
            let msg = ""
            if (s == 100) {
                msg = "上架"
            } else if (s == 1) {
                msg = "下架"
            }
            showConfirmDialog({
                title: '操作提示',
                message:
                    '确定要将该产品' + msg + '吗？',
            }).then(() => {
                this.updateStatus(s, msg)
            }).catch(() => {
                // on cancel
            });
        },
        changeHot(s) {
            let msg = ""
            if (s == 1) {
                msg = "设置为"
            } else if (s == 0) {
                msg = "取消"
            }
            showConfirmDialog({
                title: '操作提示',
                message:
                    '确定要将该产品' + msg + '热门吗？',
            }).then(() => {
                this.updateHot(s)
            }).catch(() => {
                // on cancel
            });
        },
        updateStatus(s, msg) {
            let reqdata = { id: this.good.id, customStatus: s }
            updateStatusShangJiaCustomStatus(reqdata).then(res => {
                if (res.code == 200) {
                    showToast(msg + "成功")
                    this.restGoodPageData()
                } else {
                    showToast(res.msg)
                }
            })
        },
        updateHot(s) {
            console.info("热门更新：" + s)
        },
        showCommitOrderUrl() {
            this.$emit("showCommitOrderUrl", this.good.id)
        },
        showDetail() {
            this.$router.push({
                path: "/admin/goods/detail", query: { id: this.good.id }
            })
        },
        //改变佣金规则
        changeCommissionRule() {
            this.commissionRuleDlalog = true
        },
        //更新佣金信息
        updateCommissionRule() {
            console.info("更新的值：", this.form)
            let reqdata = { id: this.good.id, customActiveCommission: this.form.activeCommission }
            updateCustomActiveCommission(reqdata).then(res => {
                if (res.code == 200) {
                    showToast("修改佣金成功")
                    this.commissionRuleDlalog = false
                    this.restGoodPageData()
                } else {
                    showToast(res.msg)
                }
            })
        },
        restGoodPageData() {
            this.$emit("restGoodPageData")
        }
    }
}
</script>
<style scoped>
.good-item-div {
    width: 94%;
    margin-left: 3%;
    background-color: white;
    margin-top: 10px;
    border-radius: 5px;
    overflow: hidden;
}

.good-item {
    width: 96%;
    margin-left: 2%;
}

.good-item img {
    width: 100px;
    height: 100px;
    float: left;
    margin-right: 10px;
    border-radius: 5px;
}

.good-item .good-name {
    color: rgb(25, 124, 255);
    font-size: 15px;
    line-height: 25px;
}

.good-supplier {
    margin-top: 3px;
    font-size: 14px;
}

.commission-rule {
    margin-top: 8px;
    font-size: 10px;
    color: #FF1111;
}

.good-item-button {
    width: 96%;
    margin-left: 2%;
}
</style>